<template>
  <div class="ReconciliationDetail">
    <div class="ReconciliationDetail-model" id="pdfDom">
      <div>
        <div>基本信息</div>
        <div class="ReconciliationDetail-model-content">
          <div>核价单编码：{{ data.pricing_number }}</div>
          <div>款号：{{ data.type_no }}</div>
          <div>核价用途：{{ data.valuation_purpose }}</div>
          <div style="color:red">状态：{{ data.s_status == 0 ? "正常" : "锁定" }}</div>
        </div>
      </div>
      <div>
        <div>成衣成本</div>
        <el-table :data="data.cy" style="width: 100%" border :cell-style="changeCellStyle">
          <el-table-column label="主料总价" align="center" prop="main_material_total"></el-table-column>
          <el-table-column label="辅料总价" align="center" prop="accessories_total"></el-table-column>
          <el-table-column label="包材总价" align="center" prop="packing_material_total"></el-table-column>
          <el-table-column label="加工费总价" align="center" prop="process_cost_total"></el-table-column>
          <el-table-column label="预估总价" align="center" prop="estimate_total"></el-table-column>
          <el-table-column label="管理费率" align="center" prop="management_rate"></el-table-column>
          <el-table-column label="成衣成本总价" align="center" prop="garment_cost_total"></el-table-column>
          <el-table-column label="税率" align="center" prop="sl"></el-table-column>
          <el-table-column label="成衣成本总价(含税)" align="center" prop="garment_cost_plus_total"></el-table-column>
        </el-table>
      </div>
      <div>
        <div>绣花成本</div>
        <el-table :data="data.xh" style="width: 100%" border :cell-style="changeCellStyle">
          <el-table-column label="绣花成本总价" align="center" prop="embroider_cost_total"></el-table-column>
          <el-table-column label="税率" align="center" prop="sl"></el-table-column>
          <el-table-column label="绣花成本总价(含税)" align="center" prop="embroider_cost_plus_total"></el-table-column>
        </el-table>
      </div>
      <div>
        <div>成本总价</div>
        <el-table :data="data.cb" style="width: 100%" border :cell-style="changeCellStyle">
          <el-table-column label="成本总价" align="center" prop="cost_total"></el-table-column>
          <el-table-column label="成本总价(含税)" align="center" prop="cost_plus_total"></el-table-column>
        </el-table>
      </div>
      <div>
        <div>其他费用</div>
        <el-table :data="data.qt" style="width: 100%" border>
          <el-table-column label="其他费用总价" align="center" prop="orther_total"></el-table-column>
          <el-table-column label="税率" align="center" prop="sl"></el-table-column>
          <el-table-column label="其他费用加价总价" align="center" prop="orther_plus_total"></el-table-column>
        </el-table>
      </div>
      <div>
        <div>备注</div>
        <div>
          <el-input
            disabled
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            v-model="data.comment"
          ></el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  postAdminPricingGetPricingOrderDetail,
} from "@/api";
export default {
  data() {
    return {
      loading: false,
      data: ""
    };
  },
  mounted() {
    let id = this.$route.query.id;
    let obj = {
      id
    }
    this.postAdminPricingGetPricingOrderDetail(obj);
  },
  methods: {
    changeCellStyle(row, column, rowIndex, columnIndex) {
      if (row.column.property == "garment_cost_plus_total" || row.column.property == "embroider_cost_plus_total" || row.column.property == "cost_plus_total") {
        return "background:rgba(53,143,238,.1);color:red"; //修改的样式
      }
    },
    // 回货单详情
    async postAdminPricingGetPricingOrderDetail(obj) {
      this.loading = true;
      await postAdminPricingGetPricingOrderDetail(obj)
        .then((res) => {
          let data = res.data;
          data.cy = [
            {
              main_material_total: data.main_material_total,
              accessories_total: data.accessories_total,
              packing_material_total: data.packing_material_total,
              process_cost_total: data.process_cost_total,
              estimate_total: data.estimate_total,
              management_rate: data.management_rate,
              garment_cost_total: data.garment_cost_total,
              sl: '1.1',
              garment_cost_plus_total: data.garment_cost_plus_total
            }
          ]
          data.xh = [
            {
              embroider_cost_total: data.embroider_cost_total,
              sl: '1.1',
              embroider_cost_plus_total: data.embroider_cost_plus_total
            }
          ]
          data.cb = [
            {
              cost_total: data.cost_total,
              cost_plus_total: data.cost_plus_total
            }
          ]
          data.qt = [
            {
              orther_total: data.orther_total,
              sl: '1.1',
              orther_plus_total: data.orther_plus_total
            }
          ]
          this.data = data;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.ReconciliationDetail {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
  &-model {
    /deep/ .el-table .cell {
      line-height: normal !important;
    }
    /deep/ .el-textarea.is-disabled .el-textarea__inner{
      color:#606266
    } 
    > div {
      > div:nth-child(1) {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
      }
    }
    > div:not(:nth-child(1)) {
      padding-bottom: 40px;
      border-bottom: 1px dashed #ebebeb;
      > div:nth-child(1) {
        font-size: 16px;
        margin: 40px 0 10px;
      }
    }
    .ReconciliationDetail-model-content {
      display: flex;
      flex-wrap: wrap;
      > div {
        padding-right: 30px;

        margin-right: 30px;
        margin-bottom: 10px;
        font-size: 14px;
      }
      > div:not(:nth-last-child(1)) {
        border-right: 1px solid #ebeef5;
      }
    }

    &-only {
      font-size: 14px;
      margin-top: 20px;
      width: 100%;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border: 1px solid #ebeef5;
      > span {
        margin: 0 60px;
      }
    }
  }
}
</style>